<template>
  <div class="app-container">
    <el-form :inline="true" :model="query" v-hasPermi="['case:list:jigou']">
      <el-form-item label="机构">
        <el-select v-model="query.deptId" placeholder="请选择机构">
          <el-option v-for="(item, index) in deptOptions" :key="index" :label="item.deptName"
            :value="item.deptId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pageNum = 1; loadData()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="caseNumber" label="案号" align="center" />
      <el-table-column prop="deptId" label="所属机构" align="center">
        <template slot-scope="scope">
          <span>{{ deptMap[scope.row.deptId] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="caseStage" label="阶段" align="center">
        <template slot-scope="scope">
          <span>{{ caseStageMap[scope.row.caseStage] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="节点" align="center">
        <template slot-scope="scope">
          <span>{{ flagMap[scope.row.flag] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="案由" align="center" />
      <el-table-column prop="address" label="原告" align="center">
        <template slot-scope="scope">
          <span>{{ getUserText(scope.row.complainantList) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="被告" align="center">
        <template slot-scope="scope">
          <span>{{ getUserText(scope.row.defendantList) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="caseAmount" label="标的金额" align="center" />

      <el-table-column prop="address" label="操作" align="center" width="270px">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-view" size="mini" v-hasPermi="['case:list:view']"
            @click="preview(scope.row)">详情</el-button>
          <template v-if="scope.row.flag != '03'">
            <el-button type="success" icon="el-icon-s-operation" v-hasPermi="['case:list:distribute']" size="mini"
              @click="distribute(scope.row)">分配</el-button>
            <el-popconfirm v-hasPermi="['case:list:finish']" confirm-button-text='结案' cancel-button-text='点错了'
              icon="el-icon-info" icon-color="red" title="您确认要结案吗？" @confirm="finish(scope.row)">
              <el-button style="margin-left: 10px;" type="success" slot="reference" icon="el-icon-switch-button"
                size="mini">结案</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="query.pageNum" :page-sizes="[10, 50, 100, 500]" :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="案件分配" :visible.sync="caseVisible" width="50%" :before-close="onCaseClose">
      <el-descriptions :column="2" size="small" border>

        <el-descriptions-item label="案号">{{ caseInfo.deptId }}</el-descriptions-item>
        <el-descriptions-item label="所属机构">{{ deptMap[caseInfo.deptId] }}</el-descriptions-item>
        <el-descriptions-item label="标的金额">{{ caseInfo.caseAmount }} 元</el-descriptions-item>
        <el-descriptions-item label="所处节点">{{ caseStageMap[caseInfo.caseStage] }}
          {{ flagMap[caseInfo.flag] }}</el-descriptions-item>
        <el-descriptions-item label="调解员">{{ mediatorMap[caseInfo.mediatorId] }}</el-descriptions-item>
        <el-descriptions-item label="案由">{{ caseInfo.reason }}</el-descriptions-item>
        <el-descriptions-item label="原告">{{ getUserText(caseInfo.complainantList) }}</el-descriptions-item>
        <el-descriptions-item label="被告">{{ getUserText(caseInfo.defendantList) }}</el-descriptions-item>
      </el-descriptions>
      <el-form :model="caseFrom" ref="caseFrom" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="调解员" prop="mediatorId">
          <el-select v-model="caseFrom.mediatorId" placeholder="请选择调解员" style="width: 100%;">
            <el-option v-for="(item, index) in userOptions" :key="index" :label="item.nickName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="oncCancel()">取 消</el-button>
        <el-button type="primary" @click="distributeSave()">分配</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listCaseInfo, updateCaseInfo } from "@/api/case/info"
import { listDept } from "@/api/system/dept"
import { listUser } from "@/api/system/user"
export default {
  name: '',
  dicts: ['case_stage', 'case_stage_flag'],
  data() {
    return {
      jgPid: process.env.VUE_APP_JG_PID,
      deptOptions: [],
      deptMap: {},
      query: {
        pageSize: 10,
        pageNum: 1,
        deptId: ''
      },
      list: [],
      total: 0,
      caseStageMap: {},
      flagMap: {},
      user: {},
      roleGroup: {},
      postGroup: {},
      userOptions: [],
      caseVisible: false,
      caseItem: null,
      caseFrom: {
        mediatorId: ''
      },
      caseInfo: {},
      mediatorMap: {}
    }
  },
  created() {
    this.loadDepts()
  },
  methods: {
    initMap() {
      let map = {}
      for (let i = 0; i < this.dict.type.case_stage.length; i++) {
        const dict = this.dict.type.case_stage[i];
        map[dict.value] = dict.label
      }
      let map2 = {}
      for (let i = 0; i < this.dict.type.case_stage_flag.length; i++) {
        const dict = this.dict.type.case_stage_flag[i];
        map2[dict.value] = dict.label
      }

      this.caseStageMap = map
      this.flagMap = map2

    },
    loadUsers(deptId) {
      listUser({
        pageNum: 1,
        pageSize: 9999,
        deptId: deptId,
        roleId: process.env.VUE_APP_TJ_ROLE_ID
      }).then(res => {
        this.userOptions = res.rows
        for (let i = 0; i < this.userOptions.length; i++) {
          const user = this.userOptions[i];
          this.mediatorMap[user.userId] = user.nickName
        }
      })
    },
    loadDepts() {
      listDept().then(res => {
        this.deptOptions = res.data.filter(item => item.parentId == this.jgPid)
        for (let i = 0; i < this.deptOptions.length; i++) {
          const dept = this.deptOptions[i];
          this.deptMap[dept.deptId] = dept.deptName
        }
        this.loadData()
      })
    },
    loadData() {
      listCaseInfo(this.query).then(res => {
        this.list = res.rows
        this.total = res.total
        if (this.caseStageMap[this.dict.type.case_stage[0].dictValue] == null || this.flagMap[this.dict.type.case_stage_flag[0].dictValue] == null) {
          this.initMap()
        }
      })
    },
    handleSizeChange(value) {
      this.query.pageSize = value
      this.query.pageNum = 1
      this.loadData()
    },
    handleCurrentChange(value) {
      this.query.pageNum = value
      this.loadData()
    },
    preview(item) {
      this.$router.push({
        path: '/case/details',
        query: {
          caseId: item.id
        }
      })

    },
    distribute(item) {
      this.caseInfo = item
      this.initDistribute()
      this.loadUsers(this.caseInfo.deptId)
      this.caseVisible = true
    },
    finish(item) {
      updateCaseInfo({
        id: item.id,
        flag: '03'
      }).then(res => {
        this.$message({
          message: '提交成功',
          type: 'success'
        });

        this.loadData()
      })
    },
    getUserText(list) {
      if (list && list.length > 0) {
        let userNames = ''
        for (let i = 0; i < list.length; i++) {
          const user = list[i];
          userNames += user.userName + ','
        }
        if (userNames.endsWith(',')) {
          userNames = userNames.substring(0, userNames.length - 1)
        }
        return userNames

      } else {
        return ''
      }
    },
    initDistribute() {
      this.caseFrom.mediatorId = ''
    },
    onCaseClose(done) {
      this.initDistribute()
      this.$refs.caseFrom.resetFields()
      done()
    },
    oncCancel() {
      this.initDistribute()
      this.$refs.caseFrom.resetFields()
      this.caseVisible = false
    },
    distributeSave() {
      this.$refs.caseFrom.validate(valid => {
        if (valid) {
          updateCaseInfo({
            id: this.caseInfo.id,
            mediatorId: this.caseFrom.mediatorId
          }).then(res => {
            this.$message({
              message: '案件分配成功',
              type: 'success'
            });

            this.loadData()
            this.oncCancel()
          })
        }
      })
    }
  }

}
</script>

<style></style>